<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        select {
            min-width: 140px;
            padding: 4px;
        }
    </style>
</head>

<body>
    <!-- 
        + 单选按钮单独出现不存在实际的应用价值，一般会以name属性的方式通过组别行为出现
        + 单选按钮被选中后的对应值，由value提供，如果未提供默认值为 on
        + 通过checked 布尔类型属性的描述，可以构建默认选中项【同组中的单选按钮，同一时间只可能有一个被选中】
        + JS 操作时针对的是 radio DOM 对象的 DOM属性 checked；
                            该属性虽然名字和HTML的checked属性名称相同，但不存在关联关系
                            所有html的checked属性只提供默认页面时的选中描述，后续不再参与radio变化调整
    -->
    <!-- <label>
        <input type="radio" value="html" name="skill">HTML
    </label>
    <label>
        <input type="radio" value="css" name="skill">CSS
    </label>
    <label>
        <input type="radio" value="javascript" name="skill" checked>JAVASCRIPT
    </label>
    <label>
        <input type="radio" value="vue" name="skill">VUE
    </label> -->
    <hr>
    <div id="app">
        <pre v-pre class="note">
        v-model 为 v-bind 和 v-on 的语法糖操作，可以在页面开发时一次性完成属性和事件的同时绑定
            + v-model的属性绑定和v-bind存在细微操作差别
            + v-model的事件绑定和v-on存在细微操作差别
        
        v-model指令只能被应用于表单操作元素【input:text,input:radio,input:checkbox,textarea,select……】
        v-model指令对表单元素的操作行为，会因为不同功能的表单元素存在绑定差别
        v-model指令的=取值不能定义除变量以外的其它数据格式

        v-model 使用
            1、输入标签的操作
            2、选择标签的操作
        </pre>
        <h4>选择标签的v-model操作</h4>
        <h5>radio下拉列表</h5>
        <pre>
            vue语法中 单选按钮的 checked 属性，无论动态还是静态绑定操作的都是DOM属性;
            v-model完成单选按钮绑定时操作三个属性：
                1、checked提供选中状态的修改，基于value值
                2、change提供改变状态后的变量赋值，基于value值
        </pre>
        <p>radioValue1：{{ radioValue1 }}</p>
        <div>
            <label>
                <input 
                    type="radio" 
                    :checked=" radioValue1=='html' " 
                    @change=" radioValue1='html' "
                >HTML
            </label>
            <label>
                <input 
                    type="radio" 
                    :checked=" radioValue1=='css' " 
                    @change=" radioValue1='css' "
                >CSS
            </label>
            <label>
                <input 
                    type="radio" 
                    :checked=" radioValue1=='javascript' " 
                    @change=" radioValue1='javascript' "
                >JAVASCRIPT
            </label>
            <label>
                <input 
                    type="radio" 
                    :checked=" radioValue1=='vue' " 
                    @change=" radioValue1='vue' "
                >VUE
            </label>
        </div>
        <div>
            <label>
                <input 
                    type="radio" 
                    value="html"
                    v-model="radioValue1"
                >HTML
            </label>
            <label>
                <input 
                    type="radio" 
                    value="css"
                    v-model="radioValue1"
                >CSS
            </label>
            <label>
                <input 
                    type="radio" 
                    value="javascript"
                    v-model="radioValue1"
                >JAVASCRIPT
            </label>
            <label>
                <input 
                    type="radio" 
                    value="vue"
                    v-model="radioValue1"
                >VUE
            </label>
        </div>
        <hr>
        <p>radioValue2：{{ radioValue2 }}</p>
        <label v-for="item in radioList">
            <input type="radio" :value="item" v-model="radioValue2">{{ item }}
        </label>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    radioValue1: "css",
                    radioValue2:"",
                    radioList:[
                        "html","css","javascript","vue"
                    ]
                }
            }
        }).mount("#app");
    </script>
</body>

</html>